<template>
  <div class="file-panel">
    <div class="file-panel-header">
      <h3>文件管理</h3>
      <label class="upload-btn">
        上传文件
        <input type="file" @change="onFileChange" multiple style="display:none;" />
      </label>
    </div>
    <table class="file-table">
      <thead>
        <tr>
          <th>文件名</th>
          <th>大小</th>
          <th>上传时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="file in files" :key="file.id">
          <td>
            <a v-if="file.url" :href="file.url" target="_blank" class="file-link">{{ file.name }}</a>
            <span v-else>{{ file.name }}</span>
          </td>
          <td>{{ formatSize(file.size) }}</td>
          <td>{{ file.uploadedAt }}</td>
          <td>
            <button class="delete-btn" @click="remove(file.id)">删除</button>
          </td>
        </tr>
        <tr v-if="!files.length">
          <td colspan="4" style="text-align:center;color:#aaa;">暂无文件</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const files = ref([
  // 示例文件不支持预览
  { id: 1, name: '示例文档.pdf', size: 102400, uploadedAt: '2025-07-01', url: '' },
  { id: 2, name: '图片.png', size: 204800, uploadedAt: '2025-07-02', url: '' },
]);

function onFileChange(e) {
  const fileList = Array.from(e.target.files);
  fileList.forEach(f => {
    const reader = new FileReader();
    reader.onload = (ev) => {
      files.value.push({
        id: Date.now() + Math.random(),
        name: f.name,
        size: f.size,
        uploadedAt: new Date().toISOString().slice(0, 10),
        url: ev.target.result // base64 或 blob url
      });
    };
    // 图片/文本/常见文件都用 dataURL 预览
    reader.readAsDataURL(f);
  });
  e.target.value = '';
}
function remove(id) {
  files.value = files.value.filter(f => f.id !== id);
}
function formatSize(size) {
  if (size < 1024) return size + ' B';
  if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB';
  return (size / 1024 / 1024).toFixed(2) + ' MB';
}
</script>

<style scoped>
.file-panel {
  width: 100%;
}
.file-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.upload-btn {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s;
  display: inline-block;
}
.upload-btn:hover {
  background: #1256a3;
}
.file-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.file-table th, .file-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}
.file-table th {
  background: #f4f6fa;
  color: #555;
}
.delete-btn {
  background: none;
  border: none;
  color: #f44336;
  cursor: pointer;
  font-size: 14px;
}
.delete-btn:hover {
  text-decoration: underline;
}
.file-link {
  color: #1976d2;
  text-decoration: underline;
  cursor: pointer;
}
.file-link:hover {
  color: #1256a3;
}
</style>
